<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>永辉外卖</title>
<script src="js/jquery.js"></script>
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet">
<link href="css/default-theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
</head>
<body class="sticky-header">
<section>
  <div class="sidebar-left">
    <div class="sidebar-left-info">
      <div class=" search-field"> </div>
      <ul class="nav nav-pills nav-stacked side-navigation">
        <li class="menu-list"> <a href="index.html"><i class="fa fa-drivers-license"></i> <span>主页</span></a>
          <!--<ul class="child-list">
            <li><a href="index.html">卡号管理</a></li>
          </ul>-->
        </li>
        <li class="menu-list "> <a href=""><i class="fa fa-file-text"></i> <span>订单管理</span></a>
          <ul class="child-list">
            <li><a href="销售订单列表.html">销售订单列表</a></li>
            <li><a href="充值订单列表.html">充值订单列表</a></li>
            <li><a href="补货订单列表.html">补货订单列表</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href=""><i class="fa fa-shopping-cart"></i> <span>商品管理</span></a>
          <ul class="child-list">
            <li ><a href="商品列表.html">商品列表</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href=""><i class="fa fa-desktop"></i> <span>机器管理</span></a>
          <ul class="child-list">
            <li ><a href="机器列表.html"> 机器列表</a></li>
            <li><a href="货道列表.html">货道列表</a></li>
            <li><a href="补货预警设置.html">补货预警设置</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href="javascript:;"><i class="fa fa-pie-chart"></i> <span>数据管理</span></a>
          <ul class="child-list">
            <li><a href="数据统计.html">数据统计</a></li>
          </ul>
        </li>
        <li class="menu-list nav-active"><a href=""><i class="fa fa-users"></i> <span>用户管理</span></a>
          <ul class="child-list">
            <li class="active"><a href="管理员列表.html">管理员列表</a></li>
            <li><a href="员工列表.html">员工列表</a></li>
<!--            <li><a href="微信菜单.html">微信菜单</a></li>-->
<!--            <li><a href="微信支付.html">微信支付</a></li>-->
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="body-content" >
    <div class="header-section">
      <div class="logo dark-logo-bg"> <a href="index.html"> <img src="img/logo-icon.png" alt="">
        <!--<i class="fa fa-maxcdn"></i>-->
        <span class="brand-name" style="font-size: 15px; font-weight: bold;">永辉外卖</span> </a> </div>
      <div class="icon-logo dark-logo-bg hidden-xs hidden-sm"> <a href="index.html"><img src="img/logo-icon.png" alt=""> </a> </div>
      <a class="toggle-btn"><i class="fa fa-outdent"></i></a>
      <div class="kouhao">专注健康.营养</div>
      <div class="notification-wrap">
        <div class="right-notification">
          <ul class="notification-menu">
            <li> <a href="javascript:;" class="btn btn-default  dropdown-toggle"> <i class="fa  fa-cogs"></i>账号设置 </a> </li>
            <li> <a href="http://localhost:8888/登录.html" class="btn btn-default  dropdown-toggle"> <i class="fa fa-sign-out"></i>退出登录 </a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="page-head">
      <ol class="breadcrumb">
        <li><a href="#">用户管理</a></li>
        <li  class="active">管理员列表</li>
      </ol>
      <h3>管理员列表</h3>
    </div>
    <div class="wrapper">
      <div class="panel">
        <div class="panel-body">
            <!--搜查框-->
          <div class="form1 searchbox">
              <ul class="row">
                  <li class="col-xs-12 col-sm-6 col-md-4">
                      <span>ID查询：</span>
                      <input type="text" class="form-control" id="searchId" placeholder="输入管理员ID">
                  </li>
                  <li class="col-xs-12 col-sm-6 col-md-2" >
                      <button id="btnSearch" class="btn btn-primary">搜索</button>
                      <button id="btnReset" class="btn btn-default">重置</button>
                  </li>
              </ul>
          </div>

<div class="clearfix">
            <div class="pull-left">
				<a href="#"  class="btn btn-primary" data-toggle="modal" data-target="#myModal2">新增管理员</a>

			  </div>
            <div class="pull-right"></div>
          </div>
            <!--表-->
			<table class="table m-t-20">
                <thead>
                <tr>
                    <th>管理员ID</th>
                    <th>姓名</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                </tr>
                </thead>
                <tbody id="admin_data">
                <!-- 生成行时添加ID -->
                <tr id="admin-${id}">
                    <!-- 列内容保持不变 -->
                </tr>
<!--                <td>-->
<!--                     <a href="#" data-toggle="modal" data-target="#myModal">编辑</a>-->
<!--                      <a href="#">删除</a>-->
<!--                </td>-->
                </tbody>
            </table>


          <div class="page clearfix">
            <div class="pull-left">共 400 条记录 第 1 / 80 页</div>
            <div class="pull-right">
              <nav aria-label="..." class="pull-left">
                <ul class="pagination">
                  <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                </ul>
              </nav>
              <div class="pull-left p-r-20  p-l-20">
                <select class="form-control">
                  <option>10条每页</option>
                </select>
              </div>
              <div class="pull-left">跳至
                <input type="text" value="5" class="form-control">
                页</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

//修改用户信息 弹出框
	<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width: 500px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
      </div>
      <div class="modal-body">
    <div class="form1">

		<ul class="row">
            <input type="hidden" id="edit_id">
            <li class="col-xs-12"> <span>姓名：</span>      <input type="text" id="edit_name" class="form-control"></li>
            <li class="col-xs-12"> <span>用户名：</span>    <input type="text" id="edit_username" class="form-control"></li>
            <li class="col-xs-12"> <span>密码：</span>     <input type="password" id="edit_password" class="form-control"></li>
            </ul>

          </div>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" id="btnSaveEdit" class="btn btn-primary">保存修改</button>
      </div>
    </div>
  </div>
</div>

//新增员工信息
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
  <div class="modal-dialog" role="document" style="width: 500px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel2">新增用户</h4>
      </div>
      <div class="modal-body">
    <div class="form1">
            <ul class="row">
                <li class="col-xs-12"> <span>姓名：</span>      <input type="text" id="add_name" class="form-control"></li>
                <li class="col-xs-12"> <span>用户名：</span>    <input type="text" id="add_username" class="form-control"></li>
                <li class="col-xs-12"> <span>密码：</span>     <input type="password" id="add_password" class="form-control"></li>
                <li class="col-xs-12"> <span>电话：</span>     <input type="text" id="add_phone" class="form-control"></li>
                <li class="col-xs-12"> <span>性别：</span>
                    <select id="add_sex" class="form-control">
                        <option value="M">男</option>
                        <option value="F">女</option>
                    </select>
                </li>
                <li class="col-xs-12"> <span>身份证号：</span>   <input type="text" id="add_idNumber" class="form-control"></li>
                  <!--<select class="form-control"><option>管理员</option></select></li>-->
            </ul>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" id="btnAddSubmit" class="btn btn-primary">新增</button>
      </div>
    </div>
  </div>
</div>







<script src="js/bootstrap.js"></script>
<script src="js/echarts.min.js"></script>
<!--<script src="js/scripts.js"></script> -->
<script src="laydate/laydate.js"></script>
<script>
lay('#version').html('-v'+ laydate.v);
laydate.render({
    elem: '#test1'
 // ,range: true
  ,theme: '#1890ff'
});

    //重置搜索框
    $(document).ready(function () {
        $("#btnReset").click(function () {
            $("#admin_data").empty();
            showAll();
        })
    })

    //按照ID进行查询
    $(document).ready(function () {
        // 搜索按钮点击事件
        $("#btnSearch").click(function() {

            const searchId = $("#searchId").val().trim();

            if (searchId){
                const idNum = parseInt(searchId);

                if (!isNaN(idNum)){

                    console.log("查询到员工ID:", idNum);

                    $.ajax({
                        url:`http://localhost:8888/admin/getOne/${idNum}`,
                        type:'GET',
                        success:function (admin) {
                            console.log(admin);

                            // 清空表格
                            $("#admin_data").empty();

                            if (admin) {
                                // 使用返回的 admin 对象
                                const html = `
                                <tr>
                                    <td>${admin.id}</td>
                                    <td>${admin.name}</td>
                                    <td>${admin.username}</td>
                                    <td>${admin.password}</td>
                                    <td>${admin.createTime}</td>
                                    <td>${admin.updateTime}</td>
                                    <td>
                                        <span onclick='alertByID(${admin.id})' data-toggle="modal" data-target="#myModal">编辑</span>
                                        /
                                        <span onclick='deleteById(${admin.id})'>删除</span>
                                    </td>
                                </tr>
                            `;

                                $("#admin_data").append(html);
                            }else {
                                $("#admin_data").html(`
                        <tr>
                            <td colspan="10" class="text-center">没有员工数据</td>
                        </tr>
                    `);
                            }
                        }
                    });

                }
            }
            //console.log("查询到员工ID:", searchId);
        });
    })

    function showAll() {
        $.ajax({
            url:'http://localhost:8888/admin/getAll',
            type:'GET',
            success:function(res){
                console.log(res);
                // 拼接表格的字符串
                // for
                var i = 0;
                var html = "";
                for(i = 0;i<res.length;i++){
                    var item =  res[i];
                    var id = item.id;
                    var name = item.name;
                    var username = item.username;
                    var password = item.password;
                    var createTime = item.createTime;
                    var updateTime = item.updateTime;
                    console.log(id+"--"+name+"--"+username+"--"+password+"--"+createTime+"--"+updateTime);
                    html += "<tr>" +
                        "<td>"+id+"</td>" +
                        "<td>"+name+"</td>" +
                        "<td>"+username+"</td>" +
                        "<td>"+password+"</td>" +
                        "<td>"+createTime+"</td>" +
                        "<td>"+updateTime+"</td>" +
                        "<td>" + "<span onclick='alertByID("+id+")' data-toggle=\"modal\" data-target=\"#myModal\">编辑</span>"+ "/" + "<span onclick='deleteById("+id+")'>删除</span>" +
                        "</td></tr>";
                }

                console.log(html);
                // 将构建好的HTML放到id=emp_data里面
                $("#admin_data").append(html);
            },
            error:function (error){
                console.log("错误："+error);
            }
        });
    }

    //显示员工信息（全部）
    $(document).ready(function(){
        $.ajax({
            url:'http://localhost:8888/admin/getAll',
            type:'GET',
            success:function(res){
                console.log(res);
                // 拼接表格的字符串
                // for
                var i = 0;
                var html = "";
                for(i = 0;i<res.length;i++){
                   var item =  res[i];
                   var id = item.id;
                   var name = item.name;
                   var username = item.username;
                   var password = item.password;
                   var createTime = item.createTime;
                   var updateTime = item.updateTime;
                   console.log(id+"--"+name+"--"+username+"--"+password+"--"+createTime+"--"+updateTime);
                    html += "<tr>" +
                        "<td>"+id+"</td>" +
                        "<td>"+name+"</td>" +
                        "<td>"+username+"</td>" +
                        "<td>"+password+"</td>" +
                        "<td>"+createTime+"</td>" +
                        "<td>"+updateTime+"</td>" +
                        "<td>" + "<span onclick='alertByID("+id+")' data-toggle=\"modal\" data-target=\"#myModal\">编辑</span>"+ "/" + "<span onclick='deleteById("+id+")'>删除</span>" +
                        "</td></tr>";
                }

                console.log(html);
                // 将构建好的HTML放到id=emp_data里面
                $("#admin_data").append(html);
            },
            error:function (error){
                console.log("错误："+error);
            }
        });
    });

    // 更改员工信息
    function alertByID(id) {
        console.log("尝试更改管理员ID:", id);

        $.ajax({
            url: `http://localhost:8888/admin/getOne/${id}`,
            type: 'GET',
            success: function(admin) {

                // 填充表单数据
                $("#edit_id").val(admin.id);
                $("#edit_name").val(admin.name);
                $("#edit_username").val(admin.username);
                $("#edit_password").val(admin.password);

                // 打开模态框
                $("#editModal").modal('show');

            }
        });

        $(document).ready(function () {
        // 保存编辑
            $("#btnSaveEdit").off('click').on('click', function() {
                const adminData = {
                    id: $("#edit_id").val(),
                    name: $("#edit_name").val(),
                    username: $("#edit_username").val(),
                    password: $("#edit_password").val(),

                };

                console.log("编辑数据:", adminData);

                $.ajax({
                    url: 'http://localhost:8888/admin/updateAdmin',
                    type: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify(adminData),
                    success: function(response) {
                        if(response && response.includes("成功")) {
                            //console.log(111111111111);
                            // 关闭正确的模态框
                            $("#myModal").modal('hide');
                            console.log(111111111111);
                            // 高亮显示更新行
                            const row = $(`#admin-${adminData.id}`);


                            // 修正列索引（从0开始计数）
                            const tds = row.find("td");
                            tds.eq(1).text(adminData.name);     // 第2列
                            tds.eq(2).text(adminData.username);  // 第3列
                            tds.eq(3).text(adminData.password);  // 第4列

                            alert("管理员信息更新成功");

                            // 清空表格
                            $("#admin_data").empty();
                            showAll();


                        } else {
                            alert("更新失败: " + response);
                        }
                    },
                    error: function() {
                        alert("更新管理员信息失败");
                    }
                });
            });

        })



    }



    // 删除员工
    function deleteById(id){

        console.log("尝试删除管理员ID:", id);
        if(confirm("确定要删除该管理员吗？")) {

            $.ajax({
                url: `http://localhost:8888/admin/del/${id}`,
                type: 'DELETE',
                success: function(response) {
                    if(response === "删除管理员成功！") {

                        alert("删除管理员成功！");
                        // 清空表格
                        $("#admin_data").empty();
                        showAll();

                    } else {
                        alert("删除失败: " + response);
                    }
                },
                error: function() {
                    alert("删除管理员失败");
                }
            });
        }
    }




    // 新增员工
    $("#btnAddSubmit").click(function() {
    var adminData = {
        name: $("#add_name").val(),
        username: $("#add_username").val(),
        password: $("#add_password").val(),
    };

    // 简单验证
    /*if(!empData.name || !empData.username || !empData.password) {
        console.log(name)
        alert("姓名、用户名和密码不能为空");
        return;
    }*/

    $.ajax({
        url: 'http://localhost:8888/admin/addAdmin',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(adminData),
        success: function(response) {
            if(response === "新增管理员成功！") {
                $("#myModal2").modal('hide');
                // 清空表单
                $("#add_name").val('');
                $("#add_username").val('');
                $("#add_password").val('');

                alert("管理员新增成功");
                // 清空表格
                $("#admin_data").empty();
                showAll();

            } else {
                alert("新增失败: " + response);
            }
        },
        error: function() {
            alert("新增管理员失败");
        }
    });
});







</script>
</body>
</html>
